.tree-theme (@base-height, @image, @image-height) {
    @correction: (@image-height - @base-height) / 2;

    .tree-node {
        min-height: @base-height;
        line-height: @base-height;
        margin-left: @base-height + 6;
        min-width: @base-height;
        background-position: -(@image-height * 9 + @correction) -@correction;
        background-repeat: repeat-y !important;
        background-image: url("@{image}");
    }

    .tree-icon {
        width: @base-height;
        height: @base-height;
        line-height: @base-height;
        background-image: url("@{image}");
    }

    .tree-icon:empty {
        width: @base-height;
        height: @base-height;
        line-height: @base-height;
    }

    .tree-wholerow {
        height: @base-height;
    }

    .tree-last {
        background: transparent;
    }

    .tree-open > .tree-ocl {
        background-position: -(@image-height * 4 + @correction) -@correction;
    }

    .tree-closed > .tree-ocl {
        background-position: -(@image-height * 3 + @correction) -@correction;
    }

    .tree-leaf > .tree-ocl {
        background-position: -(@image-height * 2 + @correction) -@correction;
    }

    .tree-themeicon {
        background-position: -(@image-height * 8 + @correction) -@correction;
    }

    > .tree-no-dots {
        .tree-node,
        .tree-leaf > .tree-ocl {
            background: transparent;
        }

        .tree-open > .tree-ocl {
            background-position: -(@image-height * 1 + @correction) -@correction;
        }

        .tree-closed > .tree-ocl {
            background-position: -@correction -@correction;
        }
    }

    .tree-disabled {
        background: transparent;

        &.tree-hovered {
            background: transparent;
        }

        &.tree-selected {
            background: #efefef;
        }
    }

    .tree-checkbox {
        background-position: -(@image-height * 5 + @correction) -@correction;

        &:hover {
            background-position: -(@image-height * 5 + @correction) -(@image-height * 1 + @correction);
        }
    }

    &.tree-checkbox-selection .tree-selected,
    .tree-checked {
        > .tree-checkbox {
            background-position: -(@image-height * 7 + @correction) -@correction;

            &:hover {
                background-position: -(@image-height * 7 + @correction) -(@image-height * 1 + @correction);
            }
        }
    }

    .tree-anchor {
        line-height: @base-height;
        height: @base-height;

        > .tree-undetermined {
            background-position: -(@image-height * 6 + @correction) -@correction;

            &:hover {
                background-position: -(@image-height * 6 + @correction) -(@image-height * 1 + @correction);
            }
        }
    }

    .tree-checkbox-disabled {
        opacity: 0.8;
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'tree-grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#tree-grayscale"); /* Firefox 10+ */
        -ms-filter: gray; /* IE6-9 */
        -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    }

    > .tree-striped {
        background-size: auto (@base-height * 2);
    }

    &.tree-rtl {
        .tree-node {
            margin-right: @base-height;
            background-image: url("");
            background-position: 100% 1px;
            background-repeat: repeat-y;
        }

        .tree-last {
            background: transparent;
        }

        .tree-open > .tree-ocl {
            background-position: -(@image-height * 4 + @correction) -(@image-height * 1 + @correction);
        }

        .tree-closed > .tree-ocl {
            background-position: -(@image-height * 3 + @correction) -(@image-height * 1 + @correction);
        }

        .tree-leaf > .tree-ocl {
            background-position: -(@image-height * 2 + @correction) -(@image-height * 1 + @correction);
        }

        > .tree-no-dots {
            .tree-node,
            .tree-leaf > .tree-ocl {
                background: transparent;
            }

            .tree-open > .tree-ocl {
                background-position: -(@image-height * 1 + @correction) -(@image-height * 1 + @correction);
            }

            .tree-closed > .tree-ocl {
                background-position: -@correction -(@image-height * 1 + @correction);
            }
        }
    }

    .tree-themeicon-custom {
        background-color: transparent;
        background-image: none;
        background-position: 0 0;
    }

    .tree-node.tree-loading {
        background: none;
    }

    > .tree-container-ul .tree-loading > .tree-ocl {
        background: url("") center center no-repeat;
    }

    .tree-file {
        background: url("@{image}") -(@image-height * 3 + @correction) -(@image-height * 2 + @correction) no-repeat;
    }

    .tree-folder {
        background: url("@{image}") -(@image-height * 8 + @correction) -(@correction) no-repeat;
    }

    > .tree-container-ul > .tree-node {
        margin-left: 0;
        margin-right: 0;
    }

    // ellipsis
    .tree-ellipsis {
        overflow: hidden;
    }
    // base height + PADDINGS!
    .tree-ellipsis .tree-anchor {
        width: calc(100% - 45px);
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .tree-ellipsis.tree-no-icons .tree-anchor {
        width: calc(100% ~"-" 5px);
    }
}
